<!-- @format -->

<template>
  <div id="Class">
    <van-search shape="round" background="#30d2bd" placeholder="剃须刀" />
    <div class="content">
      <div class="side">
        <!-- 侧边栏 -->
        <van-sidebar v-model="activeKey">
          <van-sidebar-item
            :title="item.name"
            v-for="item in list"
            :key="item.id"
            @click="clickHandle(item.id)"
          />
        </van-sidebar>
      </div>
      <!-- 商品列表 -->
      <div class="lists">
        <div class="shoplist">商品列表</div>
        <van-swipe-cell v-for="item in rightlist.list" :key="item.id">
          <van-card
            :price="item.product.promotionPrice.toFixed(2)"
            :desc="item.product.subTitle"
            :title="item.product.name"
            class="goods-card"
            :thumb="item.product.pic"
            @click="buyHandle(item.product.productSn)"
          >
            <!--  插槽：-->
            <template #footer>
              <van-button
                size="mini"
                color=" #30d2bd"
                icon="plus"
                @click.stop="addCart(item)"
              ></van-button>
            </template>
          </van-card>
        </van-swipe-cell>
      </div>
    </div>
  </div>
</template>

<script>
import { getData } from "../../main";
import { mapActions } from "vuex";
import { post, get } from "@utils/request";
export default {
  name: "class",
  components: {},
  props: {},
  data() {
    return {
      activeKey: 0,
      list: [],
      rightlist: []
    };
  },
  computed: {},
  watch: {},
  created() {
    //挂载完成后 调接口
    //先展示剃须刀页面
    getData(
      `/api/b2c/product/0-0/newlist?categoryId=1&pageNum=1&pageSize=999`
    ).then(res => {
      console.log(res);
      this.rightlist = res.data.data;
      console.log(this.rightlist);
      console.log(this.rightlist.list);
    });
    //右边数据接口
    getData("/api/b2c/0-0/category/list/wap").then(res => {
      console.log(res);
      this.list = res.data.data;
      console.log(this.list);
    });
  },
  methods: {
    ...mapActions(["sumcount"]),
    addCart(item) {
      console.log("加入购物车");

      console.log(item);
      let shopdata = {
        name: item.product.name,
        img: item.product.pic,
        desc: item.product.description,
        price: item.product.promotionPrice,
        count: 1
      };
      console.log(shopdata);
      post("http://localhost:3000/shopcart/addShopcart", shopdata).then(() => {
        get("http://localhost:3000/shopcart/findShopcart").then(res => {
          setTimeout(() => {
            this.sumcount(res.data.data.length);
          }, 500);
        });
      });
    },
    clickHandle(id) {
      //侧边栏数据，根据点击的id不同显示不同数据
      console.log(id);
      getData(
        `/api/b2c/product/0-0/newlist?categoryId=${id}&pageNum=1&pageSize=999`
      ).then(res => {
        console.log(res);
        this.rightlist = res.data.data;
        console.log(this.rightlist);
        console.log(this.rightlist.list);
      });
    },
    buyHandle(productSn) {
      console.log(productSn);
      this.$router.push({ name: "Products", query: { productSn } });
    }
  }
};
</script>

<style scoped lang="scss">
@import "@sass/Class/Class.scss";
</style>
